import {  useNavigate,Outlet, } from 'react-router-dom'

import { Badge, TabBar,  } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

const Context = ()=>{
    const navigate = useNavigate()  //获取路由的实例
    const changePage = (path: string)=>{
      navigate(path)
    }

    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: '/cart',
          title: '购物车',
          icon: <UnorderedListOutline />,
          badge: '5',
        },
        {
          key: '/order',
          title: '订单',
          icon: (active: boolean) =>
            active ? <MessageFill /> : <MessageOutline />,
          badge: '99+',
        },
        {
          key: '/mine',
          title: '我的',
          icon: <UserOutline />,
        },
      ]

return(<>
  
      {/* 一级路由以外的路由显示的地方 */}
      <div>
        {/* 类似于router-view */}
        <Outlet></Outlet>
      </div>
  <TabBar onChange={changePage}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
</>)
}
export default Context